<template>
  <div class="news-detail-container">
    <Navbar />
    <div class="container">
      <el-card class="news-card">
        <h1 class="news-title">{{ currentNews.title }}</h1>
        <div class="news-meta">
          <span>发布时间：{{ currentNews.date }}</span>
          <span>通讯员：{{ currentNews.author }}</span>
          <span>责任编辑：{{ currentNews.editor }}</span>
          <span>审核：{{ currentNews.reviewer }}</span>
        </div>
        <div class="news-img">
          <img :src="currentNews.img" alt="新闻图片">
        </div>
        <div class="news-content">
          <p v-for="(paragraph, idx) in newsParagraphs" :key="idx">{{ paragraph }}</p>
        </div>
        <el-button type="primary" @click="$router.go(-1)">返回列表</el-button>
      </el-card>
    </div>
    <Footer />
  </div>
</template>

<script>
import Navbar from '@/components/GuestNavbar'
import Footer from '@/components/GuestFooter'
import { newsData } from '@/utils/mockData'

export default {
  name: 'NewsDetail',
  components: { Navbar, Footer },
  data() {
    return {
      currentNews: {},
      newsParagraphs: [] // 拆分新闻内容为段落
    }
  },
  mounted() {
    // 从路由参数获取新闻ID
    const newsId = parseInt(this.$route.params.id)
    // 匹配对应新闻
    this.currentNews = newsData.find(news => news.id === newsId) || newsData[0]
    // 拆分内容为段落（按句号分割，模拟多段落）
    this.newsParagraphs = this.currentNews.content.split('。').filter(p => p).map(p => p + '。')
  }
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 20px;
}
.news-card {
  padding: 30px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.news-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #999;
  font-size: 14px;
  margin-bottom: 25px;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 15px;
}
.news-img {
  margin-bottom: 30px;
  text-align: center;
}
.news-img img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.news-content {
  line-height: 2;
  color: #333;
  margin-bottom: 30px;
}
.news-content p {
  margin-bottom: 15px;
}
</style>